<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <title>websocket</title>
    <script src="http://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
    <script src="https://cdn.bootcss.com/sockjs-client/1.1.4/sockjs.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>

<body>
<div id="app">
    <div style="margin: auto;text-align: center">
        <h1>Welcome to websocket</h1>
    </div>
    <br/>
    <div style="margin: auto;text-align: center">
        <select id="onLineUser" v-model="selected">
            <option v-for="opt in options" :value="opt.value">{{opt.text}}</option>
        </select>
        <input id="text" type="text" v-model="text"/>
        <button @click="send">发送消息</button>
    </div>
    <br>
    <input type="text" th:value="${username}" id="username" style="float: left"/>

    <div style="margin-right: 10px;text-align: right">
        <button @click="closeWebSocket">关闭连接</button>
    </div>
    <hr/>
    <div id="message" style="text-align: center;"></div>
</div>

</body>


<script>
    new Vue({
        el: '#app',
        data: function () {
            return {
                text:'',
                webSocket:'',
                selected: '所有',//对应select的value，显示的是value对应的text
                options: [
                    {value:'所有',text:'所有'},
                    // {value:'Jack',text:'Jack'},
                ],
            }
        },
        created(){
            var self=this

            //判断当前浏览器是否支持WebSocket
            if ("WebSocket" in window) {
                this.webSocket = new WebSocket("ws://localhost:8888/websocket/" + document.getElementById('username').value);
                var webSocket=this.webSocket

                //连通之后的回调事件
                webSocket.onopen = function () {
                    //webSocket.send( document.getElementById('username').value+"已经上线了");
                    console.log("已经连通了websocket");
                    self.setMessageInnerHTML("已经连通了websocket");
                };

                //接收后台服务端的消息
                webSocket.onmessage = function (evt) {
                    // console.log(evt);

                    var received_msg = evt.data;
                    console.log("数据已接收:" + received_msg);
                    var obj = JSON.parse(received_msg);
                    // console.log(obj);

                    console.log("消息类型:" + obj.messageType);
                    //1代表上线 2代表下线 3代表在线名单 4代表普通消息
                    if (obj.messageType == 1) {
                        //把名称放入到selection当中供选择
                        var onlineName = obj.username;
                        self.options.push({value:onlineName,text:onlineName})
                        self.setMessageInnerHTML(onlineName + "上线了");
                    } else if (obj.messageType == 2) {
                        this.options=[
                            {value:'所有',text:'所有'},
                        ];
                        var onlineName = obj.onlineUsers;
                        var offlineName = obj.username;
                        for (var i = 0; i < onlineName.length; i++) {
                            if (!(onlineName[i] == document.getElementById('username').value)) {
                                self.options.push({value:onlineName[i],text:onlineName[i]})
                            }
                        }

                        self.setMessageInnerHTML(offlineName + "下线了");
                    } else if (obj.messageType == 3) {
                        var onlineName = obj.onlineUsers;
                        var option = null;
                        for (var i = 0; i < onlineName.length; i++) {
                            if (!(onlineName[i] == document.getElementById('username').value)) {//除了用户自己，其他用户都动态加载到下拉框
                                self.options.push({value:onlineName[i],text:onlineName[i]})
                            }
                        }
                        console.log("获取了在线的名单" + onlineName.toString());
                    } else {
                        self.setMessageInnerHTML(obj.fromusername + "对" + obj.tousername + "说：" + obj.textMessage);
                    }
                };

                //连接关闭的回调事件
                webSocket.onclose = function () {
                    console.log("连接已关闭...");
                    self.setMessageInnerHTML("连接已经关闭....");
                };
            } else {
                // 浏览器不支持 WebSocket
                alert("您的浏览器不支持 WebSocket!");
            }
        },
        methods: {
            //将消息显示在网页上
            setMessageInnerHTML(innerHTML) {
                document.getElementById('message').innerHTML += innerHTML + '<br/>';
            },

            closeWebSocket() {
                //直接关闭websocket的连接
                this.webSocket.close();
            },

            send() {
                var selectText = this.selected;//下拉框中选择的那一项的text
                if (selectText == "所有") {
                    selectText = "All";
                } else {
                    this.setMessageInnerHTML(document.getElementById('username').value + "对" + selectText + "说：" + this.text);
                }
                var message = {
                    "message": document.getElementById('text').value,
                    "username": document.getElementById('username').value,
                    "to": selectText
                };
                this.webSocket.send(JSON.stringify(message));
                this.text='';//发送完消息就清空

            },


        }
    })
</script>

</html>
